<template>
  <div>
    <el-card class="box-card-test">
      <div slot="header" class="clearfix">
        <span style="font-size:20px;">测试用例列表</span>
      </div>
      <div style="height:660px;font-size:20px;">
        <el-table
          :data="showTableData"
          height="650px"
          border
          style="width: 95%;margin-left:20px;"
        >
          <el-table-column prop="id" label="ID" width="180"> </el-table-column>
          <el-table-column prop="status" label="状态" width="180">
          </el-table-column>
          <el-table-column prop="url" label="资源地址"> </el-table-column>
          <el-table-column prop="videoType" label="播放类型" width="160">
          </el-table-column>
        </el-table></div
    ></el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  mounted() {
    this.getTestItemList();

    //每隔1s进行更新
    window.setInterval(() => {
      setTimeout(this.getTestItemList(), 0);
    }, 1000);
  },
  computed: {
    ...mapState([
      "testItemList"
      //   "eventsTotal",
      //   "eventsPageCurrent",
      //   "eventsPageSize"
    ]),
    showTableData() {
      //eventstable不同颜色表示不同报警类型
      return this.testItemList.map(ele => {
        // let cellClassName = "";
        // if (ele.event === "非法停车") {
        //   cellClassName = "demo-table-info-cell-stop";
        // } else if (ele.event === "行人入侵") {
        //   cellClassName = "demo-table-info-cell-person";
        // } else if (ele.event === "道路缓行") {
        //   cellClassName = "demo-table-info-cell-slow";
        // } else if (ele.event === "道路拥堵") {
        //   cellClassName = "demo-table-info-cell-jam";
        // } else if (ele.event === "车辆逆行") {
        //   cellClassName = "demo-table-info-cell-back";
        // }

        // ele.cellClassName = {
        //   road_name: cellClassName,
        //   //datetime: cellClassName,
        //   event: cellClassName
        //   //: cellClassName
        // };
        return ele;
      });
    },
    eventDetailTitle() {
      return (
        this.eventDetailData.road_name +
        " - " +
        this.eventDetailData.event +
        " - " +
        this.eventDetailData.datetime
      );
    }
  },
  methods: {
    ...mapActions(["queryTestItemList"]),
    getTestItemList() {
      console.log("**********11111111*********");
      this.queryTestItemList();
    }
  }
};
</script>

<style lang="less">
// @table-background-color: #0a4271 !important;
.el-table .cell {
  font-size: 19px;
  color: #303133;
}

.box-card-test {
  width: 95%;
  margin-left: 2%;
  margin-bottom: 2%;
  /* height: auto !important; */
  height: 730px !important;
  min-height: 730px !important;
}
.el-table__empty-text {
  font-size: 19px;
}
// .box-card-test-conclusion {
//   width: 95%;
//   margin-left: 2%;
//   margin-bottom: 2%;
//   /* height: auto !important; */
//   height: 580px !important;
//   min-height: 580px !important;
// }
</style>
